<template>
    <el-form :model="form" ref="form" label-width="80px" :inline="false" size="normal" v-loading="loading">
        <hd-tab :tabs="tabs" />
        <el-form-item label="站点名称">
            <el-input v-model="form.title"></el-input>
            <hd-error name="title" />
        </el-form-item>
        <el-form-item label="站点域名">
            <el-input v-model="form.domain"></el-input>
            <hd-error name="domain" />
        </el-form-item>

        <el-card shadow="always" :body-style="{ padding: '20px' }">
            <div slot="header">
                选择站点默认模块
            </div>
            <hd-module-list :modules="modules" #default="{module}">
                <el-button type="primary" size="mini" v-if="form.module_id == module.id" @click="form.module_id = null">取消选择</el-button>
                <el-button type="info" size="mini" v-else @click="form.module_id = module.id"> 选择模块</el-button>
            </hd-module-list>
        </el-card>

        <div class="mt-3">
            <el-button type="primary" @click="onSubmit">保存提交</el-button>
        </div>
    </el-form>
</template>

<script>
const form = { title: '', domain: '', module_id: null }
import tabs from './tabs'
export default {
    route: false,
    props: ['id'],
    data() {
        return { tabs, form, modules: [], loading: true }
    },
    async created() {
        if (this.id) {
            this.form = await this.axios.get(`site/${this.id}`)
        }
        this.modules = await axios.get(`module/user`)
        this.loading = false
    },
    methods: {
        async onSubmit() {
            const url = this.id ? `site/${this.id}` : `site`
            await this.axios[this.id ? 'put' : 'post'](url, this.form)
            this.route('site.site.index')
        }
    }
}
</script>

<style></style>
